import indexDetail from '../page/indexDetail.vue'
import indexEdit from '@/views/demo/index/page/indexEdit.vue'
import indexImport from '@/views/demo/index/page/indexImport.vue'
import indexExport from '@/views/demo/index/page/indexExport.vue'
export default {
  components: {
    indexDetail,
    indexEdit,
    indexImport,
    indexExport
  },
  data() {
    return {
      params: {
        name: null
      },
      //选择的数据
      multipleId: [],
      isExpand: false, //展开更多搜索条件
      list: [{
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      //表头展示列
      columns: [{
          prop: 'name',
          label: '员工',
          width: 250,
          // formatter: (row, column, cellValue) => {
          //   return common.dataNull(row, column, cellValue)
          // }
        },
        {
          prop: 'address',
          label: '地址',
          // formatter: (row, column, cellValue) => {
          //   return `<span style="white-space: nowrap;color: dodgerblue;">${row.title}</span>`
          // }
        },
        {
          prop: 'state',
          label: '状态',
          width: 250,
          // render: (h, params) => {
          //   return h('el-tag', {
          //     props: {
          //       type: params.row.state === 0 ? 'success' : params.row.state === 1 ? 'info' : 'danger'
          //     } // 组件的props
          //   }, params.row.state === 0 ? '启用' : params.row.state === 1 ? '禁用' : '审核中')
          // }
        },
        {
          prop: 'date',
          label: '时间',
          width: 400,
          // formatter: (row, column, cellValue) => {
          //   return common.transformTime(row, column, cellValue)
          // }
        },
      ],
      // 按钮展示列
      operates: {
        width: 150,
        fixed: 'right',
        list: [{
            label: '详情', //按钮名称
            type: 'text', //按钮类型
            show: (index, row) => { //按钮是否展示
              return true
            },
            icon: '', //按钮图标
            plain: true, //按钮样式
            disabled: false, //按钮禁用
            method: (index, row) => { //按钮方法
              this.handleDetail(index, row)
            }
          },
          {
            label: '编辑',
            type: 'text',
            show: (index, row) => {
              return true
            },
            icon: '',
            plain: true,
            disabled: false,
            method: (index, row) => {
              this.handleEdit(index, row)
            }
          },
          {
            label: '删除',
            type: 'text',
            icon: '',
            show: (index, row) => {
              return true
            },
            plain: false,
            disabled: false,
            method: (index, row) => {
              this.handleDel(index, row)
            }
          }
        ]
      },
      //数据总数量
      total: 12,
      //设置分页参数
      pagination: {
        pageIndex: 1,
        pageSize: 10
      },
      //表格基本参数
      options: {
        stripe: false, // 是否为斑马纹 table
        loading: true, // 是否添加表格loading加载动画
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
        isFixed: true,
        tableHeight: 340,
      } // table 的参数
    }
  },
  methods: {
    //初始化
    init() {
      let that = this;
      that.options.loading = true;
      setTimeout(function() {
        that.options.loading = false;
      }, "2000");
    },
    //查询
    search() {
      let that = this;
      that.params.page = 1;
      that.pagination.pageIndex = 1;
      that.init();
    },
    //重置查询
    reload() {
      let that = this;
      that.params= {
        page: 1,
        limit: this.params.limit,
      }
      that.pagination.pageIndex = 1;
      that.init();
    },
    //新增
    handleAdd(path) {
      this.$refs.indexEdit.init();
    },
    //导入
    handleImport(path) {
      this.$refs.indexImport.init();
    },
    //导出
    handleExport(path) {
      this.$refs.indexExport.init();
    },
    // 详情
    handleDetail(index, row, path) {
      this.$refs.indexDetail.init();
    },
    // 编辑
    handleEdit(index, row, path) {
      this.$refs.indexEdit.init(row.id);
    },
    //批量删除
    handleDels() {
      let that = this;
      that.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center:'true'
      }).then(() => {
        if (that.multipleId.length > 0) {
          that.options.loading = true;
          setTimeout(function() {
            that.options.loading = false;
            that.$message({
              type: 'success',
              message: '删除成功!'
            });
          }, "2000");
        } else {
          that.$message.warning("请选择要删除的数据");
        }
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 删除
    handleDel(index, row) {
      let that = this;
      that.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center:'true'
      }).then(() => {
        that.options.loading = true;
        setTimeout(function() {
          that.options.loading = false;
          that.$message({
            type: 'success',
            message: '删除成功!'
          });
        }, "2000");
      }).catch(() => {
        that.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //展开更多条件查询
    expand() {
      let that = this;
      if (that.isExpand) {
        that.isExpand = false;
        that.options.tableHeight = 340;
      } else {
        that.isExpand = true;
        that.options.tableHeight = 380;
      }
      that.$refs.iTable.getHeight(that.options.tableHeight);
    },
    // 切换每页显示的数量
    handleSizeChange(pagination) {
      this.pagination = pagination
      this.params.limit = this.pagination.pageSize
    },
    // 切换页码
    handleIndexChange(pagination) {
      this.pagination = pagination
      this.params.page = this.pagination.pageIndex
    },
    // 选中行
    handleSelectionChange(val) {
      let that = this;
      let str = "";
      let strname = "";
      val.forEach(function(item) {
        str += item.id + ",";
      })
      if (str.length > 0) {
        that.multipleId = str.substr(0, str.length - 1);
      } else {
        that.multipleId = []
      }
    },
  },
  mounted() {
    this.init();
  }
}
